<style>
    .layuiadmin-badge {
        position: absolute;
        right: 15px
    }

    .layuiadmin-card-list {
        padding: 15px;
    }
    .layuiadmin-big-font {
        font-size: 36px;
        color: #666;
        line-height: 36px;
        padding: 5px 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap
    }

    .layuiadmin-span-color {
        font-size: 14px;
        position: absolute;
        right: 15px
    }


    .circle_bg{
        width:115px;height: 115px;padding:5px;background-image:-webkit-linear-gradient(left, red 0%, blue 30%);box-shadow: 0 0 5px
    }
    .circle_box{
        width:108px;height: 108px;text-align: center;background: #ffffff
    }
    .circle_font{
        padding-top: 10px;color: #000000;font-size: 16px
    }
</style>
{if !session('store')}
<div class="layui-row">
    <div class="layui-col-md12">
        <blockquote class="layui-elem-quote layui-quote-nm" style="text-align: center;"><h1 id="store_quote"></h1></blockquote>
    </div>
</div>
{/if}
<div class="layui-row">
    {foreach $headerAnalyze as $val}
    <div class="layui-col-md{$md} ">
        <div class="layui-card-body ">
            <div class="layui-card ">
                <div class="layui-card-header">
                    {$val.text}
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">{:lang('build_view_echart_day')}</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$val.todayCount}</p>
                    <p>
                        {:lang('build_view_echart_total')}{$val.text} <span class="layui-text">{$val.count}</span>
                        <span class="layuiadmin-span-color"><i class="fa fa-bar-chart" style="font-size: 30px; color: green;cursor: pointer" data-open="{:request()->baseUrl()}?{:request()->query()}&chartTable={$val.table}"></i></span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    {/foreach}
    <div id="totalArr" class="layui-row">
    </div>
    <div class="layui-card-body layui-anim layui-anim-upbit">
        <div class="layui-card-body layui-card think-box-shadow">
            <div class="layui-card-body">
                {$filter|raw}
                <div class="layui-form-item layui-inline" id="dateButtonDiv">
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-checked" id="today">{:lang('build_view_echart_today')}</button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="week">{:lang('build_view_echart_week')}</button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="month">{:lang('build_view_echart_month')}</button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="quarter">{:lang('build_view_echart_quarter')}</button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="year">{:lang('build_view_echart_year')}</button>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">{:lang('build_view_please_date_range')}</label>
                    <div class="layui-input-inline">
                        <input name="create_at" id="create_at" readonly value="{$Think.get.create_at}" placeholder="{:lang('build_view_please_select')}{:lang('build_view_please_date')}"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div id="container" style="width:100%;height:390px;display: inline-flex;"></div>
        </div>
    </div>
</div>
{if !session('store')}
<div class="layui-row">
    <div class="layui-col-md12">
        <div class="layui-card-body">
            <div class="layui-card ">
                <div class="layui-card-header">门店信息</div>
                <div class="layui-card-body">
<!--                    <div class="layui-form-item layui-inline">-->
<!--                        <button type="button" class="layui-btn layui-btn-sm layui-btn-checked" id="active">活跃度排行榜</button>-->
<!--                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="study">学时排行榜</button>-->
<!--                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="course">课程排行榜</button>-->
<!--                    </div>-->
                    <table class="layui-table layuiadmin-page-table" lay-skin="line">
                        <thead>
                        <tr>
                            <th>排名</th>
                            <th>门店名称</th>
                            <th style="text-align: center;">会员数量</th>
                            <th>洗衣总销售额</th>
                            <th>门店总销售额</th>
                            <th>详细地址</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="leader_body">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
<!--    <div class="layui-col-md8">-->
<!--        <div class="layui-card-body">-->
<!--            <div class="layui-card ">-->
<!--                <div class="layui-card-header">订单</div>-->
<!--                <div class="layui-card-body">-->
<!--                    <table class="layui-table layuiadmin-page-table" lay-skin="line">-->
<!--                        <thead>-->
<!--                        <tr>-->
<!--                            <th>会员名称</th>-->
<!--                            <th>订单编号</th>-->
<!--                            <th>购买信息</th>-->
<!--                            <th>数量</th>-->
<!--                        </tr>-->
<!--                        </thead>-->
<!--                        <tbody id="order_body">-->

<!--                        </tbody>-->
<!--                    </table>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
</div>
{/if}
<script>
    var obj = {};
    var type = 'today';
    $('.layui-form').removeClass().addClass('layui-form').on('submit',function () {
        var arr = $(this).serializeArray();
        arr.forEach(function(item){
            obj[item.name] = item.value;
        });
        postChart($('#create_at').val());
    });
    initChart = function(title,text,series,dateArr,textType){
        require(['echarts'],function(echarts){
            chart = echarts.init(document.getElementById('container'));
            chart.clear();
            chart.resize({
                width: $('#container').width() ,
            });
            window.onresize = chart.resize;
            chart.setOption({
                title: {
                    text: title
                },
                tooltip: {trigger: 'axis'},
                grid: {top: '10%', left: '3%', right: '8%', bottom: '3%', containLabel: true},
                xAxis: [{
                    type: 'category',
                    scale: false,
                    boundaryGap: false,
                    axisLabel: {
                        color: '#2f9de2',
                    },
                    data: dateArr
                }],
                yAxis: [{
                    type: 'value',
                    scale: true,

                    axisLabel: {
                        color: '#2f9de2',
                        formatter: "{value}"
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#cccccc'
                        }
                    }
                }],
                legend: {data: textType},
                series: series
            });
        })

    }
    postChart();
    window.form.render();
    window.laydate.render({range: true, elem: '#create_at',done:function(value){
            if(value != ''){
                $('#dateButtonDiv').find('button').addClass('layui-btn-primary').removeClass('layui-btn-checked');
                type='range';
                postChart(value)
            }
        }});
    $(function () {
        $('#active').click(function () {
            $(this).siblings('button').addClass('layui-btn-primary').removeClass('layui-btn-checked');
            $(this).removeClass('layui-btn-primary').addClass('layui-btn-checked');
            leader(1)
        });
        $('#study').click(function () {
            $(this).siblings('button').addClass('layui-btn-primary').removeClass('layui-btn-checked');
            $(this).removeClass('layui-btn-primary').addClass('layui-btn-checked');
            leader(2)
        });
        $('#course').click(function () {
            $(this).siblings('button').addClass('layui-btn-primary').removeClass('layui-btn-checked');
            $(this).removeClass('layui-btn-primary').addClass('layui-btn-checked');
            leader(3)
        });
        $('#today').click(function () {
            $('#create_at').val('');
            $(this).siblings('button').addClass('layui-btn-primary').removeClass('layui-btn-checked');
            $(this).removeClass('layui-btn-primary').addClass('layui-btn-checked');

            type='today';
            postChart()
        });
        $('#week').click(function () {
            $('#create_at').val('');
            $(this).siblings('button').addClass('layui-btn-primary').removeClass('layui-btn-checked');
            $(this).removeClass('layui-btn-primary').addClass('layui-btn-checked');
            type='week';
            postChart()
        });
        $('#month').click(function () {
            $('#create_at').val('');
            $(this).siblings('button').addClass('layui-btn-primary').removeClass('layui-btn-checked');
            $(this).removeClass('layui-btn-primary').addClass('layui-btn-checked');
            type='month';
            postChart()
        });
        $('#quarter').click(function () {
            $('#create_at').val('');
            $(this).siblings('button').addClass('layui-btn-primary').removeClass('layui-btn-checked');
            $(this).removeClass('layui-btn-primary').addClass('layui-btn-checked');
            type='quarter';
            postChart()
        });
        $('#year').click(function () {
            $('#create_at').val('');
            $(this).siblings('button').addClass('layui-btn-primary').removeClass('layui-btn-checked');
            $(this).removeClass('layui-btn-primary').addClass('layui-btn-checked');
            type='year';
            postChart()
        });
        getUrlParam('store_name');
    });
    function postChart(daterange=0){
        var index = layer.load(0,{time:5000});
        $('#totalArr').html('');
        $('#container').hide();
        Object.assign(obj,{datetype: type,daterange:daterange});
        $.post("{:request()->url()}",obj, function (data, status) {
            if (data.code == 200) {
                var res = data.data;
                var size = 4;
                if(res.totalArr.length >size){
                    var line = Math.ceil(res.totalArr.length / size);
                    var md = 3;
                    var end_md = 12 / (res.totalArr.length % size);
                }else{
                    var md = 12 / res.totalArr.length;
                    if(md < 3){
                        md =3;
                    }
                }
                var i = 0;
                var current_line = 1;
                res.totalArr.forEach(function(item){
                    var percent = parseFloat(item.percent);
                    if (percent > 0) {
                        var percent_text = '▲';
                        var percent_color = 'color-red';
                    }else{
                        var percent_text = '▼';
                        var percent_color = 'color-green';
                    }
                    var totalhtml = '';
                    if(item.totalCount!=null){
                        totalhtml =  '<p>{:lang('build_view_echart_total')}'+item.text+'： '+item.totalCount+'</p>' ;
                    }
                    $('#totalArr').append('<div class="layui-col-md'+md+'">\n' +
                        '                    <div class="layui-card-body">\n' +
                        '                        <div class="layui-card">\n' +
                        '                            <div class="layui-card-header">\n' +
                        '                                '+item.text+'\n' +
                        '                                <span class="layui-badge layui-bg-blue layuiadmin-badge">'+item.date_text+'</span>\n' +
                        '                            </div>\n' +
                        '                            <div class="layui-card-body layuiadmin-card-list">\n' +
                        '                                <p class="layuiadmin-big-font">'+item.count+'</p>\n' +
                        '                                <p><span>'+item.compare_text+' </span><span class="layui-text"> '+item.compare+'</span><span class="pull-right"><span class="'+percent_color+'">'+percent_text+'</span><span class="layui-text"> '+item.percent+'</span></span></p>\n' +
                        '<hr class="layui-bg-gray">\n' +totalhtml+
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                </div>');
                    i++;
                    if((i % size) == 0){
                        current_line++;
                    }
                    if(current_line == line){
                        md = end_md;
                    }
                });
                var textType = [];
                res.series.forEach(function(item){
                    textType.push(item.name);
                });
                initChart(res.title,res.text,res.series,res.dateArr,textType);
                $('#container').show();
                layer.close(index);
            }
        });
    }
    //获取url中的参数
    function getUrlParam(name) {
        console.log(name);
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.hash.substr(1).match(reg);
        if (r != null) {
            let cont = decodeURI(r[2]);
            $("#store_quote").text(cont);
        } else{
            return null;
        }
    }
</script>
<script>
    leader(1);
    function leader(type)
    {
        // 获取排行榜
        $.post('/admin/platform/store',{type:type},function (res) {
            var list = '';
            if (res.code == 1) {
                $.each(res.data,function(i,n) {
                    if(!n.xiyi_total_price){
                        n.xiyi_total_price="0.00"
                    }
                    if(!n.order_total_price){
                        n.order_total_price="0.00"
                    }
                   list += '<tr>' +
                                '<td>'+ (i+1) +'</td>' +
                                '<td>'+ n.name +'</td>' +
                                '<td style="text-align: center;">'+ n.user_count +'</td>' +
                                '<td>'+ n.xiyi_total_price +'</td>' +
                               '<td>'+ n.order_total_price +'</td>' +
                                '<td>'+ n.full_address +'</td>' +
                                '<td><button class="layui-btn layui-btn-sm btn_sub" data-confirm="" data-open="'+ n.site_url +'" type="button" data-title="查看">查看</button></td>'
                       + '</tr>'
                });
            } else {
                list = '<tr><td colspan="7" style="text-align: center">暂无数据</td></tr>';
            }
            $('#leader_body').html(list);
        });
    }
</script>
